<template>
	<view class="content">
		<!-- <view><input type="text" :value="idddddd" @change="(e) => {this.idddddd = e.target.value}"></view>
		<button @click="addCart">加钥匙</button> -->


		<video v-if="isShowVideo" id="myVideo" :autoplay="!controls" :controls="controls" :src="src"  :page-gesture="controls" :show-progress="controls" :show-fullscreen-btn="controls" :show-play-btn="controls" :show-loading="controls" :show-center-play-btn="controls" :enable-progress-gesture="controls" object-fit="cover" :vslide-gesture-in-fullscreen="controls" @ended="ended" @error="error" @loadedmetadata="loadedmetadata">
		</video>
		<view v-if="!isShowVideo">
			<image class="bg-image" src="../../static/index/index_bg.png" mode="scaleToFill"></image>
			<!-- 顶部 -->
			<view class="user-topView">
				<image class="top-bg-img" src="../../static/index/img-shouye-240-diaopai@2x.png" mode="scaleToFill"></image>
				<view class="leftView"  @click="onJumpMePage">
					<image class="user_info_img" :src="userHeaderUrl" :style="{border: isLogin?'2px solid #E8A974;':'none'} " mode="aspectFit"></image>
					<view class="nikeName">{{nickName}}</view>
				</view>
				<view class="rightView">
					<view class="right-icon">
						<image src="../../static/index/icon-48-baoxiang@2x.png" mode="aspectFit"></image>
						<text>{{gameInfo.box_num}}</text>
					</view>
					<view class="right-icon">
						<image src="../../static/index/icon-48-yaoshi@2x.png" mode="aspectFit"></image>
						<text>{{gameInfo.key_num}}</text>
					</view>
				</view>


			</view>
			<!-- 地图 -->
			<movable-area class="mapView">
				 <movable-view class="map-moveView" out-of-bounds="true" direction="all" scale = "true" scale-min="0.8" scale-max="10"  @change="onMovableViewChange"  @scale="onMovableViewScale">
					 <image class="bg_img" style="width: 100%;height: 100%;" src="../../static/index/img-shouye-ditu.png" mode="scaleToFill"></image>
						<button class="cu-btn address-itme" v-for="(item,index) in addressList" v-if="bkgscale >= item.level" :key="index"
							:style="{left:`${item.x - 70}rpx`,top:`${item.y - 70}rpx`,transform: `translateZ(0) scale(${1 / bkgscale})`}"
							@click="onJumpItemDetailClick(item.id)"
						>
										 <!-- ,transform: `scale(${1 / bkgscale})` -->
					<!-- <button
					 	class="cu-btn address-itme"
						v-for="(item,index) in addressList"
						v-if="bkgscale >= item.level"
						:key="index"
						:style="{left:`${item.x}rpx`,
							top:`${item.y}rpx`,
							width: '140rpx',
							height: '140rpx',
							transform: `scale(${1 / bkgscale})`}"
						@click="onJumpItemDetailClick(item.id)"
					> -->
						<!-- <image class="itme-bg-img" src="../../static/index/img-shouye-hxsbg@2x.png" mode="aspectFit"></image> -->
						<image class="itme-bg-img" v-if="item.isShowKey" :src="item.img_open_url" mode="aspectFit"></image>
						<image class="itme-bg-img" v-else :src="item.img_url" mode="aspectFit"></image>
						<view class="label-name">
							<image class="label-name-bg" src="../../static/index/img-shuye-mingzikuang@2x.png" mode="aspectFit"></image>
							<text>{{item.short_name}}</text>
						</view>
						<view v-if="item.isShowKey" class="keyView">
							<image src="../../static/index/icon-48-yaoshi@2x.png" mode="aspectFit"></image>
							<text>已解锁</text>
						</view>
					 </button>
					<view class="cu-btn address-itme hide-item" v-for="(hideItem,hideIndex) in addressList" v-if="bkgscale < hideItem.level" :key="hideIndex"
						:style="{left:`${hideItem.x - 70 + 8}rpx`,top:`${hideItem.y - 70 -9.75}rpx`,transform: `translateZ(0) scale(${1 / bkgscale})`}"
					>
						<image class="hide-item-icon" src="../../static/index/img-shouye-dibiao@2x.png" mode="aspectFit"></image>
					</view>
				</movable-view>
			</movable-area>

			<!-- button-items -->
			<view class="button-items">
				<button class="cu-btn" v-on:click="isShowActivityDetail=true">
					<image src="../../static/index/icon-shouye-142-jieshao@2x.png" mode="aspectFit"></image>
				</button>
				<button class="cu-btn" v-on:click="isShowChangeGuide=true">
					<image src="../../static/index/icon-shouye-142-daoyou@2x.png" mode="aspectFit"></image>
				</button>
			</view>

			<!-- 底部 -->
			<!-- <view class="tip-bottomView">
				<image :src="guideRole[nowGuideId - 1]" mode="scaleToFill"></image>
				<view class="bg-view">
					<view class="content-view">
						<text>小朋友，点击你想了解的景点，开启闵行“钥匙”之行吧！！</text>
					</view>
				</view>
			</view>
 -->
			<!-- 引导页 -->
			<view class="dailog_view" v-if="isShowYinDao" @touchmove.stop.prevent="moveHandle">
				<view class="dailog_screen yindao">
					<image class="imge1" :src="!isShowYinDaoTwo?'../../static/index/img-yindao-500-dianji@2x.png':'../../static/index/img-yindao-500-suofang@2x.png'" mode="aspectFit"></image>
					<image class="imge2" src="../../static/index/btn-yindao-132-ok@2x.png" mode="aspectFit" v-on:click="onYinDaoOneOkClick"></image>
				</view>
				<view class="background_screen" ></view>
			</view>

			<!-- 活动介绍 -->
			<view class="dailog_view" v-if="isShowActivityDetail" @touchmove.stop.prevent="moveHandle">
				<view class="dailog_screen activity-detail">
					<image class="activity-bg" src="../../static/index/img-tankuang-1050-bg@2x.png" mode="scaleToFill"></image>
					<image class="title-img" src="../../static/index/img-biaoti-tankuang-132-jieshao@2x.png" mode="aspectFit"></image>
					<button class="cu-btn closeBtn" v-on:click="isShowActivityDetail=false">
						<image src="../../static/index/btn-tankuang-100-guanbi@2x.png" mode="aspectFit"></image>
					</button>
					<scroll-view class="scrollView" scroll-y="true">
						<!-- <image class="at-detail" src="../../static/index/img-tankuang-jieshao-peitu@2x.png" mode="aspectFit"></image> -->
						<image class="at-detail" src="../../static/index/img-tankuang-jieshao-peitu@3x.png" mode="aspectFit" />
					</scroll-view>
					<button class="cu-btn okBtn" v-on:click="isShowActivityDetail=false">
						<image src="../../static/index/btn-anniu-130-zhengchang@2x.png" mode="aspectFit"></image>
						<text>确定</text>
					</button>
				</view>
				<view class="background_screen" ></view>
			</view>

			<!-- 切换导游 -->
			<view class="dailog_view" v-if="isShowChangeGuide" @touchmove.stop.prevent="moveHandle">
				<view class="dailog_screen guideView">
					<image class="activity-bg" src="../../static/index/img-tankuang-1050-bg@2x.png" mode="scaleToFill"></image>
					<image class="title-img" src="../../static/index/img-biaoti-tankuang-132-daoyou@2x.png" mode="aspectFit"></image>
					<button class="cu-btn closeBtn" v-on:click="onChangeGuideCancelClick">
						<image src="../../static/index/btn-tankuang-100-guanbi@2x.png" mode="aspectFit"></image>
					</button>
					<view class="guide-tip">
						小朋友，请选择一位小导游带你逛逛吧！！
					</view>
					<view class="scrollView">
						<button class="cu-btn sele-item" v-for="(item,index) in guideList" :key="index" v-on:click="onChangeGuideSlectedId" :data-id="item.id">
							<image class="roleImg" :src="item.src" mode="scaleToFill"></image>
							<image v-if="changeGuidId === item.id" class="roleImg-sele" src="../../static/index/img-tankuang-daoyou-240-xuanzhong@2x.png" mode="scaleToFill"></image>
							<view class="role-name-view">
								<view class="role-name" :style=" {border:`${changeGuidId === item.id?'2px solid #F43B3B;':'none'}`} ">
									{{item.name}}
								</view>
							</view>
						</button>
					</view>
					<button class="cu-btn okBtn guide-ok" v-on:click="onChangeGuideOKClick">
						<image src="../../static/index/btn-anniu-130-zhengchang@2x.png" mode="aspectFit"></image>
						<text>确定</text>
					</button>
				</view>
				<view class="background_screen" ></view>
			</view>
		</view>
	</view>
</template>

<script>
let app = getApp();
import {strPlusXing, createNonce32CharStr} from "../../utils/util.js"
import {playMp3} from "../../tool/pubTool.js"
import {isLoginOk,getUserFinsh,getHomeJson,getUserInfo,getUserTaskDo} from "../../tool/userTool.js"
import homedata from './mock'

export default {
	data() {
		return {
			idddddd: 10,
			bkgscale: 1, // 背景的缩放
			// 视频
			isShowVideo:false,
			src:"https://file-oss.putaocdn.com/minhangwenchuang/home/1614060086234470.mp4?" + createNonce32CharStr(12),
			controls:false, // 深坑 必须用 参数配置
			//授权
			isLogin:false,
			userHeaderUrl:'../../static/index/user_head_nomal.png',
			nickName: "未登录",
			gameInfo: "",
			//引导
			isShowYinDao:false,
			isShowYinDaoTwo:false, //是否显示第二个引导图片,
			// 活动介绍
			isShowActivityDetail:false,
			//导游
			isShowChangeGuide:false, //切换导游
			nowGuideId:1, //选中导游ID
			guideRole:["../../static/index/img-shouye-230-bubu@2x.png",
			"../../static/index/img-shouye-230-lulu@2x.png",
			"../../static/index/img-shouye-230-keke@2x.png"],
			changeGuidId:1, // 选择导游时候的切换的导游id
			guideList:[
				{id:1,src:"../../static/index/img-tankuang-240-bubu@2x.png",name:"布布"},
				{id:2,src:"../../static/index/img-tankuang-240-lulu@2x.png",name:"鲁鲁"},
				{id:3,src:"../../static/index/img-tankuang-240-keke@2x.png",name:"可可"}
			],
			// 景点
			btnScale:1, // 缩放
			addressList:[],
			opedAddressIds:[],


		};
	},
	async onLoad(option) {
		// let src = this.src + createNonce32CharStr(12)
		await this.$onLaunched;
		// uni.setStorageSync("videoTag",1)
		// uni.setStorageSync("nowGuideId",1)
		// uni.setStorageSync("yinDaoTag",1)

		this.checkShowVideo();
		this.getHomeData();
		this.isLogin = isLoginOk();
		setTimeout(()=> {
			this.getEndAddressList();
		}, 500)
		this.getUserInfo();

		if(getApp().globalData.wxUserInfo){
			this.userHeaderUrl = app.globalData.wxUserInfo.avatarUrl;
			this.nickName = app.globalData.wxUserInfo.nickName;
		}
		if(getApp().globalData.phoneNum){
			this.userHeaderUrl = app.globalData?.wxUserInfo?.avatarUrl;
			this.nickName = strPlusXing(app.globalData?.phoneNum,3,4)
		}
	},
	onShow() {

		if(getApp().globalData.wxUserInfo){
			this.userHeaderUrl = app.globalData.wxUserInfo.avatarUrl;
			this.nickName = app.globalData.wxUserInfo.nickName;
		}
		if(getApp().globalData.phoneNum){
			this.userHeaderUrl = app.globalData.wxUserInfo.avatarUrl;
			this.nickName = strPlusXing(app.globalData.phoneNum,3,4)
		}

		if(app.globalData.userInfo&&app.globalData.userInfo.token){ // 刷新
			this.isLogin = isLoginOk();
			this.getEndAddressList();
			this.getUserInfo();
		}
	},
	methods: {
		addCart(){
			getUserTaskDo({params:{
				"scenic_id":parseInt(this.idddddd)
			}});
		},
		// async getEndAddressList(){
		// 	let res = await getUserFinsh();
		// 	this.addressList = uni.getStorageSync("addressList");
		// 	// if (res){
		// 	// 	 this.opedAddressIds = res;
		// 	// }

		// },
		getEndAddressList(){
			getUserFinsh().then(res => {
				setTimeout(() => {
					this.addressList = uni.getStorageSync("addressList");
				}, 500)
			});
			// if (res){
			// 	 this.opedAddressIds = res;
			// }

		},
		async getHomeData(){
			let res = await getHomeJson();
			// this.addressList = homedata.homedata.data
			uni.setStorageSync("addressList",res)
		},
		async getUserInfo(){
			let res = await getUserInfo();
			this.gameInfo = res;
		},
		loadedmetadata(){
			uni.hideLoading();
		},
		ended(){
			uni.setStorageSync("videoTag",1);
			this.isShowVideo = false;
			this.checkGuide();
		},
		error(){
			uni.hideLoading();
			uni.setStorageSync("videoTag",1);
			this.isShowVideo = false;
			this.checkGuide();
		},
		/**
		 * 视频-引导
		 * */

		checkShowVideo(){
			const videoTag = uni.getStorageSync("videoTag");
			if(videoTag !==1){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.isShowVideo = true;
				uni.setStorageSync("videoTag",1)
			}else{
				this.isShowVideo = false;
				this.checkGuide();
			}
		},
		/***
		* 引导相关
		*/
		checkShowYinDao(){
			const yinDaoTag = uni.getStorageSync("yinDaoTag");
			this.isShowYinDao = yinDaoTag !== 1;
			if(yinDaoTag !== 1){
				playMp3({type:3})
			}
		},
		onYinDaoOneOkClick(){
			if(!this.isShowYinDaoTwo){ // 第一个引导
				playMp3({type:4})
				this.isShowYinDao = true;
				this.isShowYinDaoTwo = true;

			}else{ // 第二个引导
				playMp3({type:2})
				this.isShowYinDao = false;
				this.isShowYinDaoTwo = false;
				uni.setStorageSync("yinDaoTag",1)

			}

		},
		/***
		* 地图相关
		*/
		onMovableViewChange(e){
		},
		onMovableViewScale(e){
			console.log(e.mp.detail)
			// this.bkgscale = e.mp.detail.scale * 0.5
			this.bkgscale = e.mp.detail.scale
			console.log(e.mp.detail.scale)
		},
		onJumpItemDetailClick(id){
			uni.navigateTo({
				url:`/pages/attractionDetail/attractionDetail?id=${id}`
			})
		},
		/***
		* 切换导游相关
		*/
	   // 默认选择导游
		checkGuide(){
			let guideId = uni.getStorageSync("nowGuideId");
			if(!guideId){ //设置默认值
				guideId = 1;
				uni.setStorageSync("nowGuideId",guideId);
				this.isShowChangeGuide = true
				// 语音：请选择一位小导游带你逛逛吧
				playMp3({type:1})
			}
			this.nowGuideId = guideId;
			this.changeGuidId = this.nowGuideId;
		},
		// 导游切换事件
		onChangeGuideSlectedId(e){
			let id = e.mp.currentTarget.dataset.id;
			this.changeGuidId = id;
		},
		// 选择引导相关
		onChangeGuideCancelClick(e){
			this.isShowChangeGuide = false;
			this.changeGuidId = this.nowGuideId;
			// 选择导游结束 展示引导层
			this.checkShowYinDao();
		},
		onChangeGuideOKClick(){
			this.isShowChangeGuide = false;
			this.nowGuideId = this.changeGuidId;
			uni.setStorageSync("nowGuideId",this.nowGuideId);
			// 选择导游结束 展示引导层
			this.checkShowYinDao();
		},
		onJumpMePage(){
			uni.navigateTo({
				url:"/pages/me/me"
			})
		},


	}
};
</script>

<style lang="stylus">
	page{
		background-color #F6F6F6
		max-height 100%
		max-width 100%
		width 100%
		height 100%
	}

	.content{
		position relative
		height 100%
		width 100%
		max-height 100%
		max-width 100%
		#myVideo{
			height 100%
			width 100%
			max-height 100%
			max-width 100%
		}
		.bg-image{
			position absolute
			height 100%
			width 100%
			z-index -1
		}
		.user-topView{
			padding 56rpx
			height 240rpx
			position relative
			display flex
			justify-content space-between
			z-index 100
			.top-bg-img{
				width 100%
				height 100%
				display block
				position absolute
				left 0
				top 0
			}
			.leftView{
				position relative
				display flex
				align-items center
				.user_info_img{
					width 96rpx
					height 96rpx
					border-radius 50%
				}
				.nikeName{
					margin-left 8rpx
					font-family PingFangSC-Semibold
					font-size 28rpx
					color: #844425
					letter-spacing 0.14rpx
					max-width 200rpx
				}
			}
			.rightView{
				position relative
				display flex
				align-items center
				.right-icon{
					display flex
					align-items center
					background: #C6784A;
					box-shadow: inset 0 6rpx 0 0 rgba(132,68,37,0.51);
					border-radius: 29rpx;
					height 58rpx
					line-height 58rpx
					min-width 146rpx
					&:first-child{
						margin-right 30rpx
					}
					>image{
						height 48rpx
						width 48rpx
						display block
						margin 0 15rpx
					}
					>text{
						font-family: PingFangSC-Semibold;
						font-size: 30rpx;
						color: #FBE893;
						letter-spacing: 0.15px;
					}
				}
			}
		}
		.mapView{
			position absolute
			left 5rpx
			top 50%;
			transform translate(0,-50%)
			text-align center
			width 740rpx
			height 740rpx
			display flex
			flex-direction column
			justify-content center
			align-items center
			.map-moveView{
				width 740rpx
				height 740rpx
				position relative
				.bg_img{
					position absolute
					left 0;
					top 0;
					width 100%
					height 100%
					display block
				}
				.address-itme{
					width 140rpx
					height 140rpx
					position absolute
					z-index 3
					.itme-bg-img{
						width 100%
						height 100%
						display block
						position absolute
						left 0
						top 0
					}
					.label-name{
						width 100%

						position absolute
						left 0
						bottom 0
						>image{
							width 100%
							height 38rpx
							display block
							position absolute
							left 0
							bottom 0
						}
						>text{
							position relative
							width 100%
							line-height 38rpx
							font-family: FZY4K--GBK1-0;
							font-size: 18rpx;
							color: #440902;
							letter-spacing: 0.09px;
						}
					}
					.keyView{
						opacity: 0.6;
						background: #361807;
						border-radius: 25.5rpx;
						width 118rpx
						height 51rpx
						display flex
						justify-content center
						align-items center
						position absolute
						left 50%
						top 50%
						transform translate(-50%, -50%)
						font-family: PingFangSC-Regular;
						font-size: 18rpx;
						color: #F7CB45;
						>image{
							width 32rpx
							height 32rpx
							display block
						}
					}
					&.hide-item{
						z-index 2
						.hide-item-icon{
							width 32rpx
							height 39rpx
						}
					}

				}
			}
		}
		.button-items{
			position absolute
			top 250rpx
			right 10rpx
			display flex
			flex-direction column
			justify-content center
			align-items center

			>button{
				width 142rpx
				height 142rpx
				padding 0
				&:first-child{
					margin-bottom 20rpx
				}
				>image{
					width 100%
					height 100%
					display block
				}
			}
		}
		.tip-bottomView{
			width 100%;
			position absolute
			left 0
			bottom 49rpx
			height 230rpx
			display flex
			align-items center
			>image{
				position absolute
				width 230rpx
				height 230rpx
				display block
			}
			.bg-view{
				margin-left 110rpx
				padding 10rpx
				width 619rpx
				background: #F9E5A1;
				box-shadow: 0 4rpx 5rpx 5rpx rgba(165,79,49,0.36), inset 0 2rpx 0 0 rgba(255,255,255,0.74), inset 0 -2rpx 1rpx 0 #E29F45;
				border-radius: 20rpx;
				.content-view{
					background-image: linear-gradient(-180deg, #FDFFF7 0%, #FEFED9 100%);
					border: 2rpx solid #E8A974;
					border-radius: 12rpx;
					height 120rpx
					padding-left 110rpx
					display flex
					flex-direction column
					align-items center
					justify-content center
					>text{
						font-family PingFangSC-Regular
						font-size 26rpx
						color #844425
						letter-spacing 0
						line-height 36rpx
					}
				}
			}
		}
		.yindao{
			display flex
			flex-direction column
			justify-content center
			align-items center
			background-color rgba(0,0,0,0)
			.imge1{
				position relative
				width 500rpx
				height 510rpx
				display block
			}
			.imge2{
				position relative
				margin-top 23rpx
				width 400rpx
				height 132rpx
				display block
			}


		}
		.activity-detail,.guideView{
			display flex
			flex-direction column
			align-items center
			background-color rgba(0,0,0,0)
			width 680rpx
			height 1050rpx
			.activity-bg{
				width 100%;
				height 100%;
				display block;
				position absolute
				left 0;
				top 0
			}
			.title-img{
				width 430rpx
				height 132rpx
				display block
				position relative
				top -40rpx
			}
			.closeBtn{
				width 100rpx;
				height 100rpx;
				position absolute;
				right 0;
				top 0;
				>image{
					width 100%;
					height 100%;
					display block;
				}
			}
			.scrollView{
				width 530rpx
				height 686rpx
				/* 滚动条样式 */
				::-webkit-scrollbar {
				  width: 12rpx; /*滚动条的宽度*/
				  height: 4rpx;
				  color:#ffffff;
				}
				/*定义滚动条轨道 内阴影+圆角*/
				::-webkit-scrollbar-track {
				  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
				  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
				  border-radius: 10px;
				  background: rgba(198,120,74,0.11);
				  border-radius: 8px;
				}
				/*定义滑块 内阴影+圆角*/
				::-webkit-scrollbar-thumb {
				  border-radius: 10px;
				  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
				  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
				  background: #F7E2B7;
				  border-radius: 8px;
				}
				.at-detail{
					margin 0 auto
					width 500rpx
					height 2140rpx
					// display block
				}
			}
			.okBtn{
				width 350rpx
				height 130rpx
				position relative
				>image{
					position absolute
					left 0
					top 0
					width 100%
					height 100%
					display block
				}
				>text{
					position relative
					font-family: PingFangSC-Semibold;
					font-size: 36rpx;
					color: #FFFFFF;
					letter-spacing: 5.54rpx;
				}
			}


		}
		.guideView{
			display flex
			.guide-tip{
				position relative
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #844425;
				letter-spacing: 0;
				line-height: 36rpx
				padding-bottom 30rpx
			}
			.scrollView{
				display flex
				flex-direction row
				flex-wrap wrap
				align-items center
				justify-content center
				height 590rpx
				.sele-item{
					position relative
					width 240rpx
					height 240rpx
					&:nth-child(1){
						margin-right 20rpx
					}
					.roleImg{
						position absolute
						left 0
						top 0
						width 100%;
						height 100%;
						display block;
					}
					.roleImg-sele{
						position absolute
						left 0
						top 0
						width 100%;
						height 100%;
						display block;
					}
					.role-name-view{
						position absolute
						left 50%
						bottom -25rpx
						width 120rpx
						transform translateX(-50%)
						background: #F9E5A1;
						box-shadow: 0 8rpx 11rpx 0 rgba(165,79,49,0.68), inset 0 2rpx 0 0 rgba(255,255,255,0.74), inset 0 -2rpx 1rpx 0 #E29F45;
						border-radius: 25rpx;
						display flex
						flex-direction row
						justify-content center;
						align-items center
						padding 5rpx
						.role-name{
							font-family: PingFangSC-Semibold;
							font-size: 26rpx;
							color: #844425;
							letter-spacing: 4rpx;
							border-radius: 25rpx;
							line-height 26rpx
							width 110rpx
							text-align center
							padding 6rpx 10rpx
							// width 100%

						}
					}
				}
			}
			.guide-ok{
				margin-top 40rpx
			}
		}
	}

</style>
